<template>
  <div class="limiter">
    <div class="container-login100" style="background-image: url('/images/img-01.jpg');">
      <div class="wrap-login100 p-t-190 p-b-30">
        <div class="login100-form validate-form">
          <div class="login100-form-avatar">
            <img src="/images/avatar-01.jpg" alt="AVATAR">
          </div>

          <span class="login100-form-title p-t-20 p-b-45">Login</span>

          <div class="wrap-input100 validate-input m-b-10" data-validate="请输入用户名">
            <input class="input100" type="text" name="username" v-model="username" placeholder="用户名" autocomplete="off">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-user"></i>
            </span>
          </div>

          <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
            <input class="input100" type="password" name="pass" v-model="password" placeholder="密码">
            <span class="focus-input100"></span>
            <span class="symbol-input100">
              <i class="fa fa-lock"></i>
            </span>
          </div>

          <div class="container-login100-form-btn p-t-10">
            <button class="login100-form-btn" @click="login">登 录</button>
          </div>

          <div class="text-center w-full p-t-25 p-b-230">
            <router-link class="txt1" to="/forgetPassword">
              忘记密码？
            </router-link>
          </div>

          <div class="text-center w-full">
            <router-link class="txt1" to="register">
              立即注册
              <i class="fa fa-long-arrow-right"></i>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 导入 Vue Router 的钩子函数，用于获取路由实例
import { useRouter } from 'vue-router'
import { POST } from '@/services/request.js'; // 导入封装好的请求工具
// 插件
import { showSuccessToast, showFailToast } from 'vant';
// 获取路由实例，用于后续页面跳转
const router = useRouter();
// 定义响应式用户名和密码
const username = ref('');
const password = ref('');

// 存放数据
const data = ref('')

// 绑定点击事件
const login = async () => {
  // console.log(username.value);
  data.value = {
    username: username.value,
    password: password.value,
  }
  // console.log(data.value);
  // url的请求路径对应PHP后端的路径
  const result = await POST({
    url: '/User/login',
    params: data.value,
  })
  // console.log(result.code);
  if(result.code===1){
    showSuccessToast(result.msg);
    localStorage.setItem('LoginUser',JSON.stringify(result.data));
    router.push('index');
  }else{
    showFailToast(result.msg);
  }

}



</script>
